import { lazy } from "react";
import {createBrowserRouter} from 'react-router-dom'
import {
  MenuFoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';

const App = lazy(()=>import('../App'))
const Home = lazy(()=>import('../pages/home/Index'))
const Table = lazy(()=>import('../pages/table/Index'))
const Mess = lazy(()=>import('../pages/mess/Index'))
const User = lazy(()=>import('../pages/user/Index'))
const Login = lazy(()=>import('../pages/login/Index'))
const Detail = lazy(()=>import('../pages/detail/Index'))

type homeRouter = {
    path:string;
    element:JSX.Element;
    children?:homeRouter;
    icon?:any;
    label?:string;
}[]

export const homeRoutes:homeRouter = [
    {
        path:"/home",
        element:<Home />,
        icon:<MenuFoldOutlined />,
        label:"首页"
    },
    {
        path:"/table",
        element:<Table />,
        icon:<UploadOutlined />,
        label:"表格"
    },
    {
        path:"/mess",
        element:<Mess />,
        icon:<VideoCameraOutlined />,
        label:"切换管理"
    },
    {
        path:"/user",
        element:<User />,
        icon:<UserOutlined />,
        label:"用户管理"
    },
]

const routes:homeRouter = [
    {
        path:"/",
        element:<App />,
        children:homeRoutes
    },
    {
        path:"/login",
        element:<Login />
    },
    {
        path:"/detail/:id",
        element:<Detail />
    },
]

const router = createBrowserRouter(routes)

export default router